<template>
  <div>
    <div class="container">
      <div class="home-box">
          <h3 style="text-align: center">本站介绍</h3>
          <div>这是一个jitsi web视频会议的前端个人实现</div>
          <div>目前测试过chrome和firefox浏览器，都是支持的</div>
          <br />

          <div>本站仅作技术交流、展示使用，请勿恶意他用</div>

          <br />
          <div>点击创建房间按钮创建一个新的房间</div>
          <div>或者输入房间ID，加入一个房间</div>
          <div>在地址栏可以查看房间ID号</div>

          <br />


        <div>
          <div class="create">
            <aki-button @click="create()">创建房间（随机ID）</aki-button>
          </div>
          <br />
          <div class="enter">
            <input v-model="id" />
            <aki-button @click="enter(id)">加入房间</aki-button>
          </div>
        </div>

        <br />
        <div style="position: absolute; bottom: 20px">
          <h4>网站备案号 蜀ICP备20016561号-1</h4>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { uuid } from "./room/core/utils";
export default {
  data: () => {
    return {
      id: "",
    };
  },
  methods: {
    create() {
      // location.replace(`conference/${uuid()}`)
      this.$router.push({ name: "conference-room", params: { id: uuid() } });
    },
    enter(id) {
      this.$router.push({ name: "conference-room", params: { id } });
    },
  },
};
</script>
<style scoped>
.container {
  height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 100%;
  width: 100%;
}
.home-box {
  width: 400px;
}
.create {
  width: 270px;
}
.enter {
  width: 300px;
  display: flex;
}
</style>
